<template>
  <div>
    <el-card>
      <div class="action-box">
        <el-select
          v-model="albumId"
          placeholder="选择相册"
          style="width: 220px"
          @change="fetchPhotos"
        >
          <el-option
            v-for="album in albumList"
            :key="album.id"
            :label="album.name"
            :value="album.id"
          />
        </el-select>
        <custom-upload
          :action="uploadUrl"
          :data="{ albumId }"
          :headers="{ Authorization: useUserStore().token }"
          :show-file-list="false"
          :onSuccess="handleUploadSuccess"
          :before-upload="beforeUpload"
          :disabled="!albumId"
          name="files"
          :limit="10"
          multiple
          slot="trigger"
        >
          <template #trigger>
            <el-button type="primary" :disabled="!albumId">上传图片</el-button>
          </template>
        </custom-upload>
      </div>
      <div class="photo-grid">
        <el-card
          v-for="(photo, index) in photoList"
          :key="photo.id"
          class="photo-card"
          shadow="hover"
        >
          <el-image
            :src="photo.url"
            fit="cover"
            class="photo-img"
            :preview-src-list="(photoList as Array<{ url: string }>).map(item => item.url)"
            :initial-index="index"
            preview-teleported
          />
          <div class="photo-info">
            <div class="photo-title">{{ photo.name }}</div>
            <div class="photo-actions">
              <el-button size="small" type="danger" @click="handleDelete(photo)">删除</el-button>
            </div>
          </div>
        </el-card>
        <div v-if="!photoList.length" class="empty-tip">暂无图片</div>
      </div>
      <el-pagination
        v-model:current-page="pagination.pageIndex"
        v-model:page-size="pagination.pageSize"
        :total="pagination.total"
        :page-sizes="[12, 24, 48]"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="fetchPhotos"
        @size-change="fetchPhotos"
        style="margin-top: 16px"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { fetchPhotoList, deletePhotos } from '@/services/apis/media/album'
  import { useAlbumStore } from '@/stores/albumStore'
  import { storeToRefs } from 'pinia'
  import { useUserStore } from '@/stores/userStore'

  const albumId = ref<number>()
  const photoList = ref<any[]>([])
  const pagination = ref({ pageIndex: 1, pageSize: 12, total: 0 })
  const uploadUrl = '/adminapi/album/photo/add' // 替换为你的上传接口
  const albumStore = useAlbumStore()
  const { albumList } = storeToRefs(albumStore)
  const fetchPhotos = async () => {
    // if (!albumId.value) return
    const res = await fetchPhotoList({
      albumId: albumId.value,
      pageIndex: pagination.value.pageIndex,
      pageSize: pagination.value.pageSize
    })
    photoList.value = res.list
    pagination.value.total = res.total
  }

  // 上传前校验
  const beforeUpload = (file: File) => {
    const isImage = file.type.startsWith('image/')
    if (!isImage) {
      ElMessage.error('只能上传图片文件')
    }
    return isImage
  }

  // 上传成功
  const handleUploadSuccess = () => {
    ElMessage.success('上传成功')
    fetchPhotos()
  }

  // 删除图片
  const handleDelete = (photo: any) => {
    ElMessageBox.confirm('确定删除该图片吗？', '提示', { type: 'warning' })
      .then(async () => {
        await deletePhotos(photo.id)
        ElMessage.success('删除成功')
        fetchPhotos()
      })
      .catch(() => {})
  }

  onMounted(() => {
    if (albumList.value.length === 0) albumStore.fetchAlbumList()
    fetchPhotos()
  })
</script>

<style scoped lang="scss">
  .action-box {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    /* align-items: center; */
  }
  .photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    margin-top: 16px;
  }
  .photo-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    .photo-img {
      width: 100%;
      height: 140px;
      object-fit: cover;
      border-radius: 6px;
      margin-bottom: 10px;
    }
    .photo-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .photo-title {
        font-size: 14px;
        color: #333;
        margin-bottom: 8px;
        word-break: break-all;
      }
      .photo-actions {
        display: flex;
        gap: 8px;
      }
    }
  }
  .empty-tip {
    color: #bbb;
    text-align: center;
    grid-column: 1/-1;
    padding: 40px 0;
  }
</style>
